<template>
  <a-row :gutter="10">
    <a-col :md="24" :sm="24">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">

              <a-col :md="6" :sm="12">
                <a-form-item :label="$t('light.lightCode')">
                  <j-input :placeholder="$t('base.inputVagueQuery')" v-model="queryParam.code"></j-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search"> {{$t('base.query')}} </a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px"> {{$t('base.reset')}} </a-button>
                </span>
              </a-col>

            </a-row>
          </a-form>
        </div>
        <!-- 查询区域-END -->

        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleAddLight" type="primary" icon="plus">{{$t('base.add')}}</a-button>
          <a-button @click="readLightData" type="primary" icon="plus"> {{$t('light.readLightData')}} </a-button>
          <a-button type="primary" icon="download" @click="customUploadFile('import_light.xls')"> {{$t('light.downloadTemplate')}} </a-button>
          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
            <a-button type="primary" icon="import"> {{$t('base.importFile')}} </a-button>
          </a-upload>

          <a-button type="primary"  icon="download" @click="ledOpenOrClose($t('light.turnOn')+'？',100)">
            {{$t('light.turnOn')}}
          </a-button>
          <a-button type="primary"  icon="download" @click="ledOpenOrClose($t('light.turnOff')+'？',0)">
            {{$t('light.turnOff')}}
          </a-button>
          <a-button type="primary"  @click="brightnessSet" icon="bulb">{{$t('light.dimming')}}</a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>{{$t('base.del')}}</a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px">  {{$t('base.batchOperation')}} <a-icon type="down" /></a-button>
          </a-dropdown>
        </div>

        <!-- table区域-begin -->
        <div>

          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{fixed:true,selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">

            <template slot="avatarslot" slot-scope="text, record, index">
              <div class="anty-img-wrap">
                <img :src="getAvatarView(record.currentStatus)"/>
              </div>
            </template>

            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>
            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
              <img v-else :src="getImgView(text)" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(text)">
                下载
              </a-button>
            </template>

            <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)"> {{$t('base.edit')}} </a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link"> {{$t('base.more')}} <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm :title="$t('base.confirmDelete')" @confirm="() => handleDelete(record.id)">
                  <a> <a-icon type="delete" /> {{$t('base.del')}} </a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a @click="updateLg(record)"> {{$t('light.updateCoordinate')}} </a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

          </a-table>
        </div>

        <glrLight-modal ref="modalForm" @ok="modalFormOk"></glrLight-modal>
        <glr-light-l-g ref="glrLightLG" @ok="modalFormOk"></glr-light-l-g>
        <a-modal
          :title="brightnessSetTitle"
          :visible="brightnessSetVisible"
          :confirmLoading="brightnessSetConfirmLoading"
          @ok="brightnessSetHandleOk"
          @cancel="brightnessSetHandleCancel">
          <div style="width: 100%">
            亮度:<a-slider id="vol_Id" :max="maxValue" :disabled="disabledValue" :step="5" :defaultValue="0" v-model="brightnessValue"/>
          </div>
        </a-modal>
      </a-card>
    </a-col>

  </a-row>
</template>

<script>

    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import GlrLightModal from './modules/GlrLightModal'
    import { httpAction,getAction } from '@/api/manage'
    import GlrLightLG from "./modules/GlrLightLG";
    import GlrSensorList from "../sensor/GlrSensorList";
    import GlrSideGateWayList from "./GlrSideGateWayList";
    import JInput from '@/components/jeecg/JInput'

    export default {
        name: "GlrSideLightList",
        mixins:[JeecgListMixin],
        props:['gateWayCode'],
        components: {
            GlrSideGateWayList,
            GlrSensorList,
            GlrLightLG,
            GlrLightModal,
            JInput
        },
        data () {
            return {
                description: '路灯管理页面',
                dropTrigger: '',
                gateWayTree:[],
                autoExpandParent:true,
                defaultExpandParent:true,
                iExpandedKeys:[],
                brightnessSetTitle:this.$t('light.brightnessSetting'),
                brightnessSetVisible:false,
                brightnessSetConfirmLoading:false,
                disabledValue:false,
                brightnessValue:0,
                maxValue:100,
                // 表头
                columns: [
                    {
                        title: '#',
                        dataIndex: '',
                        key:'rowIndex',
                        width:60,
                        align:"center",
                        customRender:function (t,r,index) {
                            return parseInt(index)+1;
                        }
                    },
                    {
                        title:this.$t('light.lightCode') ,
                        align:"center",
                        dataIndex: 'code'
                    },
                    {
                        title:this.$t('light.lightType'),
                        align:"center",
                        dataIndex: 'typeName'
                    },
                    {
                        title:this.$t('light.gateWayCode') ,
                        align:"center",
                        dataIndex: 'gateWayCode'
                    },
                    {
                        title:this.$t('light.gateWay'),
                        align:"center",
                        dataIndex: 'gateWayName'
                    },
                    {
                        title:this.$t('light.currentVolV') ,
                        align:"center",
                        dataIndex: 'currentVol'
                    },
                    {
                        title:this.$t('light.currentCurMa'),
                        align:"center",
                        dataIndex: 'currentCur'
                    },
                    {
                        title:this.$t('light.currentBrightnessPCT') ,
                        align:"center",
                        dataIndex: 'currentBrightness'
                    },
                    {
                        title:this.$t('light.currentApparentPower') ,
                        align:"center",
                        dataIndex: 'currentApparentPower'
                    },
                    {
                        title:this.$t('light.currentPowerW') ,
                        align:"center",
                        dataIndex: 'currentPower'
                    },
                    {
                        title:this.$t('light.currentState') ,
                        align:"center",
                        scopedSlots: {customRender: "avatarslot"}
                    },
                    {
                        title:this.$t('light.currentTemperature') ,
                        align:"center",
                        dataIndex: 'currentTemperature'
                    },
                    {
                        title: this.$t('base.operation'),
                        dataIndex: 'action',
                        align:"center",
                        scopedSlots: { customRender: 'action' }
                    }
                ],
                url: {
                    list: "/glr/glrLight/list",
                    delete: "/glr/glrLight/delete",
                    deleteBatch: "/glr/glrLight/deleteBatch",
                    exportXlsUrl: "/glr/glrLight/exportXls",
                    importExcelUrl: "glr/glrLight/importExcel",
                    gateWayTree: "glr/glrLight/gateWayTree",
                    readLightData: "glr/glrLight/readLightData",
                    ledOpenOrClose: "glr/glrLight/ledOpenOrClose",
                },
                dictOptions:{
                },
            }
        },
        computed: {
            importExcelUrl: function(){
                return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
            },
        },
        watch: {
            gateWayCode: {
                immediate: true,
                handler(valData) {
                    this.queryParam.gateWayCode=valData;
                    this.loadData();
                }
            },
        },
        created(){

        },
        methods: {
            initDictConfig(){
            },
            brightnessSetHandleCancel(){
                this.brightnessValue=0;
                this.brightnessSetVisible=false;
            },
            brightnessSet(){
                if (this.selectedRowKeys.length <= 0) {
                    this.$message.warning(this.$t('base.pleaseSelectARecord'));
                    return;
                }
                this.brightnessValue=0;
                this.brightnessSetVisible=true;
            },
            brightnessSetHandleOk(){
                if (this.selectionRows.length <= 0) {
                    this.$message.warning(this.$t('base.pleaseSelectARecord'));
                    return;
                } else {
                    var lightCode = "";
                    for (var a = 0; a < this.selectionRows.length; a++) {
                        lightCode += this.selectionRows[a].code+";"+this.selectionRows[a].gateWayCode + ",";
                    }
                    var that = this;
                    that.loading = true;
                    httpAction(that.url.ledOpenOrClose, {
                        lightCode: lightCode,
                        brightValue:  that.brightnessValue
                    }, "post").then((res) => {
                        if (res.success) {
                            //that.$message.success(res.message);
                            that.$message.success(that.$t('base.operationSuccessful'));
                            that.brightnessSetHandleCancel();
                        } else {
                            //that.$message.warning(res.message);
                          that.$message.warning(that.$t('base.operationFailed'));
                        }
                    }).finally(() => {
                        that.loading = false;
                    });
                }
            },
            getAvatarView: function (status) {
                if (status == 'Y') {
                    return require('@/assets/img/deng_work.png');
                }else if (status == 'N')  {
                    return require('@/assets/img/deng_gray.png');
                }else if (status == 'K'){
                    return require('@/assets/img/deng_red.png');
                }
            },
            setThisExpandedKeys(node) {
                if (node.children && node.children.length > 0) {
                    this.iExpandedKeys.push(node.key)
                    for (let a = 0; a < node.children.length; a++) {
                        this.setThisExpandedKeys(node.children[a])
                    }
                }
            },
            onSelectChangeData(gateWayCode) {
                this.queryParam.gateWayCode=gateWayCode;
                this.gateWayCode=record.key;
                this.ipagination={
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: ['10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + "-" + range[1] + " 共" + total + "条"
                    },
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total: 0
                }
                this.loadData(1,this.gateWayCode)
            },
            handleAddLight(){
                this.$refs.modalForm.add(this.queryParam.gateWayCode);
                this.$refs.modalForm.title = "新增";
                this.$refs.modalForm.disableSubmit = false;
            },
            readLightData(){
                if(this.gateWayCode==null||this.gateWayCode==''){
                    this.$message.warning(this.$t('base.pleaseSelectCorrespondingRecord') );
                    return;
                }
                var that = this;
                that.loading=true;
                httpAction(that.url.readLightData, {gateWayCode: that.gateWayCode},"post").then((res) => {
                    if (res.success) {
                        setTimeout(function(){
                            that.loading=false;
                            //that.$message.success(res.message);
                            that.$message.success(that.$t('base.operationSuccessful'));
                            this.loadData(1,this.gateWayCode)
                            that.onClearSelected();
                        }, 3000);
                    } else {
                        //that.$message.warning(res.message);
                        that.$message.warning(that.$t('base.operationFailed'));
                    }
                }).finally(() => {
                    setTimeout(function(){
                        that.loading=false;
                    }, 3000);
                });
            },
            updateLg(record){
                this.$refs.glrLightLG.edit(record,'2');
            },
            ledOpenOrClose: function (msg, dimmingValue) {
                if (this.selectionRows.length <= 0) {
                    this.$message.warning(this.$t('base.pleaseSelectARecord'));
                    return;
                } else {
                    var lightCode = "";
                    for (var a = 0; a < this.selectionRows.length; a++) {
                        lightCode += this.selectionRows[a].code+";"+this.selectionRows[a].gateWayCode + ",";
                    }
                    var that = this;
                    this.$confirm({
                        title: "确认",
                        content: msg,
                        onOk: function () {
                            that.loading = true;
                            httpAction(that.url.ledOpenOrClose, {
                                lightCode: lightCode,
                                brightValue: dimmingValue
                            }, "post").then((res) => {
                                if (res.success) {
                                    //that.$message.success(res.message);
                                    that.$message.success(that.$t('base.operationSuccessful'));
                                    this.loadData(1,this.gateWayCode)
                                    that.onClearSelected();
                                } else {
                                    //that.$message.warning(res.message);
                                    that.$message.warning(that.$t('base.operationFailed'));
                                }
                            }).finally(() => {
                                that.loading = false;
                            });
                        }
                    });
                }
            },
        }
    }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>